<template>
  <header ref="shopHeader" class="shopHeader">
    <img ref="headerBgImg" class="headerBg" src="../images/header-bg-mini.jpg">
    <div class="userAccountInfo">
      <div class="accountItem accountItemDiamond">
        <div class="infoTitle">我的钻石</div>
        <div class="infoContent">
          <div class="infoContentIconWrap">
            <img class="infoContentIcon" src="../images/home/diamond.png">
          </div>
          <div class="infoContentValue">
            {{ coin }}
          </div>
        </div>
      </div>
      <div class="split"></div>
      <div class="accountItem" @click="showExchangeRecord">
        <div class="infoTitle">
          <div class="infoTitleText">我的碎片</div>
          <div class="infoTitleIcon">
            <img
              src="../images/home/info-title-icon.png"
              style="width:0.24rem;height:0.24rem; margin-left:0.08rem; margin-top: 0.02rem"
            >
          </div>
        </div>
        <div class="infoContent">
          <div v-for="(got, index) in gots" :key="index" class="gotItem">
            <div class="infoContentIconWrap">
              <img class="infoContentIcon" :src="got.icon">
            </div>
            <div class="infoContentValue">
              {{ got.count }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="propsArea">
    <div v-if="showPropsDashboard" class="propsList" :style="{top: propsListTop}">
      <!-- <div class="cdkBtn" @click="showCdkExchange">兑换码</div> -->
      <van-tabs type="line">
        <van-tab v-for="(exchangeCategory, index) in exchangeList" :key="index" :title="exchangeCategory.name">
          <div class="exchangeList">
            <exchange-item
              v-for="(exchange, exchangeIndex) in exchangeCategory.list"
              :key="exchangeIndex"
              :exchange-info="exchange"
              :style="exchangeItemStyle(exchangeIndex)"
              @exchange-success="exchangeSuccess"
            />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <exchange-record-popup v-model:is-show="isShowExchangeRecord" :default-records="records" />
  <cdk-popup v-model:is-show="isShowCdkExchange" />
</template>
<script>
import ExchangeItem from '../components/exchange-item'
import { groupExchangesByType } from '@/lib/js/utils/activity'
import headerBg from '../images/header-bg.jpg'
import { useLoginStore } from '@/lib/js/hooks'
import { CdkPopup, RecordPopup } from '../components'
import { createLogin } from '@/lib/components/Login'
import $api from '../api'
import './home.scss'

export default{
  components: {
    ExchangeItem,
    ExchangeRecordPopup: RecordPopup,
    CdkPopup
  },
  setup(){
    const loginStore = useLoginStore()
    return {
      loginStore
    }
  },
  data(){
    return {
      exchangeList: {},
      propsListTop: '300px',
      showPropsDashboard: false,
      coin: 0,
      gots: [],
      isShowExchangeRecord: false,
      isShowCdkExchange: false,
      records: []
    }
  },
  watch: {
    'loginStore.isInitial': {
      handler(value){
        this.$nextTick(() => {
          if(value){
            if(this.loginStore.isLogin){
              this.$toast.loading('加载中...')
              this.loadExchangeInfo()
              this.loadRecord()
            }else{
              createLogin(()=> {
                this.loginStore.isLogin = true
              })
            }
          }
        })
      },
      immediate: true
    }
  },

  mounted(){
    document.body.className = 'exchange-body'
    const { headerBgImg } = this.$refs
    const { query: { fromactivity } } = this.$route

    if(fromactivity){
      HeyheyBridge.setTopBarBack({
        show: true
      })
    }

    headerBgImg.addEventListener('load',this.setLayoutTop)
    if(!this.loginStore.isLogin && !this.loginStore.isHH){
      createLogin(()=> {
        this.loginStore.isLogin = true
      })
    }
  },
  activated(){
    const { query: { fromactivity } } = this.$route

    if(fromactivity){
      HeyheyBridge.setTopBarBack({
        show: true
      })
    }
  },
  methods: {
    async loadExchangeInfo(){
      const res = await $api.shopInfo()
      const { exchanges, got = [], coin } = res
      const result = groupExchangesByType(exchanges)
      this.exchangeList = result
      if(got.length === 0){
        this.gots = [{
          icon: require('../images/source/blsj.png'),
          count: 0
        },{
          icon: require('../images/source/dwzj.png'),
          count: 0
        }, {
          icon: require('../images/source/zlsj.png'),
          count: 0
        }]
      }else{
        this.gots = got
      }
      this.coin = coin
      this.$nextTick(() =>{
        this.$toast.clear()
      })
    },
    exchangeItemStyle(index){
      if((index + 1) % 3 === 0){
        return { marginRight: 0 }
      }
      return null
    },
    headerPicLoaded(){
      console.log('headerPicLoaded')
    },
    setLayoutTop(){
      const { shopHeader: shopHeaderEl, headerBgImg } = this.$refs
      this.showPropsDashboard = true
      this.propsListTop = `${shopHeaderEl.clientHeight + 15}px`
      headerBgImg.removeEventListener('load',this.setLayoutTop)
      headerBgImg.src = headerBg
    },
    exchangeSuccess(){
      this.loadExchangeInfo()
      this.loadRecord()
    },
    showCdkExchange(){
      this.isShowCdkExchange = true
    },
    showExchangeRecord(){
      this.isShowExchangeRecord = true
    },
    async loadRecord(){
      const res =  await $api.loadRecord({ page: 1, limit: 20 })
      const { data } = res
      this.records = data
    }
  }
}
</script>
<style lang="scss" scoped>
.shopHeader, .propsArea{
  color: #fff;
}
.shopHeader{
  position: relative;
  margin-bottom: 0.22rem;
  font-family: 'Futur';
  .headerBg{
    width: 100%;
    height: auto;
  }
  .userAccountInfo{
    position: absolute;
    bottom: 0;
    left: 0.3rem;
    right: 0.3rem;
    height: 1.56rem;
    display:flex;
    justify-content: center;
    background: rgba(149,149,149,0.20);
    border: 1px solid rgba(255,255,255,0.34);
    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.10);
    border-radius: 12px;
    @include bg('../images/home/account-info-bg.png');
    .split{
      position: relative;
      opacity: 0.8;
    }
    .split:before{
      content: "";
      position: absolute;
      top: 0.2rem;
      bottom: 0.2rem;
      left: 0;
      right: 0;
      border-right: 1px solid #fff;
      transform: scaleX(0.5);
      transform-origin: left top;
    }
    .accountItem{
      padding-top: 0.32rem;
      padding-bottom: 0.34rem;
      flex: 1;
      .infoTitle{
        text-align: center;
        font-size: 0.24rem;
        margin-bottom: 0.08rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .infoContent{
        display: flex;
        justify-content: center;
        align-items: center;
        .infoContentIconWrap{
          width: 0.48rem;
          height: 0.48rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .infoContentIcon{
            max-width: 100%;
            max-height: 100%;
          }
        }
        .infoContentValue{
          font-size: 0.32rem;
          font-weight: bold;
          max-width: 1.6rem;
          @include  ellipsis();
        }
        .gotItem{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right:0.06rem;
        }
      }
    }
    .accountItemDiamond{
      width: 2.27rem;
      flex: unset;
    }
  }
}
.propsArea{
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  .propsList{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    overflow-y: auto;
    background:url('../images/home/propListbg1.png') no-repeat, url('../images/home/propListbg2.png') no-repeat;
    background-size: 100% auto;
    background-position: 3rem -1rem, -1.5rem 100%;
    .cdkBtn{
      position: absolute;
      right: 0.2rem;
      height: 0.4rem;
      line-height: 0.4rem;
      width: 1.08rem;
      text-align: center;
      color: #6EACDF;
      background-color: #fff;
      font-size: 0.24rem;
      border-radius: 0.24rem;
      z-index: 1;
    }
  }
  .exchangeList{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  ::v-deep{
    .van-tabs__nav{
      display: block;
      background-color: transparent;
    }

    .van-tab__text{
      opacity: 0.4;
    }

    .van-tab--active{
      .van-tab__text{
        opacity: 1;
        font-weight: bold;
      }
    }
    .van-tabs{
      position: unset;
    }

    .van-tab{
      float: left;
      color: #fff;
      font-size: 0.32rem;
      margin-right: 0.31rem;
    }

    .van-tabs__line{
      height: 0.08rem;
      width: 0.08rem;
      border-radius: 0.08rem;
      background-color: #fff;
    }

    .van-tabs--line .van-tabs__wrap{
      height: 0.6rem;
      margin-bottom: 0.36rem;
    }

    .van-tabs__content{
      position: absolute;
      bottom:0.3rem;
      left: 0.3rem;
      right: 0.3rem;
      top: 0.7rem;
      padding-top: 0.1rem;
      overflow-y: auto;
    }
  }
}
</style>
